import React, { useState, useEffect } from 'react'
import axios from 'axios'
import { Table, Button, notification } from 'antd'

export default function Audit() {
  const [dataSource, setdataSource] = useState([])
  const { roleId, region, username } = JSON.parse(localStorage.getItem('token'))
  useEffect(() => {
    const roleObj = {
      1: 'superadmin',
      2: 'admin',
      3: 'editor',
    }

    // 获取审核状态为auditState=1的数据，
    // 数据处理：如果是超级管理员，这可以看到所有区域管理，区域编辑，以及自身的发表的新闻
    // 如果不是超级管理员，是区域管理员，则只能看到区域管理员管辖范围的以及自己的新闻
    axios.get(`/news?auditState=1&_embed=category`).then(res => {
      const list = res.data
      setdataSource(
        roleObj[roleId] === 'superadmin'
          ? list
          : [
            ...list.filter(item => item.author === username),
            ...list.filter(
              item =>
                item.region === region && roleObj[item.roleId] === 'editor'
            ),
          ]
      )
    })
  }, [])

  const columns = [
    {
      title: '新闻标题',
      dataIndex: 'title',
      render: (title, item) => {
        return <a href={`#/news-manage/preview/${item.id}`}>{title}</a>
      },
    },
    {
      title: '作者',
      dataIndex: 'author',
    },
    {
      title: '新闻分类',
      dataIndex: 'category',
      render: category => {
        return <div>{category.title}</div>
      },
    },
    {
      title: '操作',
      render: item => {
        return (
          <div>
            {/* 通过，则auditState改为 2 ，publishState改为1*/}
            <Button type="primary" onClick={() => handleAudit(item, 2, 1)}>
              通过
            </Button>
            {/* 未通过则auditState改为3 ，publishState改为0*/}
            <Button danger onClick={() => handleAudit(item, 3, 0)}>
              驳回
            </Button>
          </div>
        )
      },
    },
  ]

  const handleAudit = (item, auditState, publishState) => {
    setdataSource(dataSource.filter(data => data.id !== item.id))

    axios
      .patch(`/news/${item.id}`, {
        auditState,
        publishState,
      })
      .then(res => {
        notification.info({
          message: `通知`,
          description: `您可以到[审核管理/审核列表]中查看您的新闻的审核状态`,
          placement: 'bottomRight',
        })
      })
  }
  return (
    <div>
      <Table
        dataSource={dataSource}
        columns={columns}
        pagination={{
          pageSize: 5,
        }}
        rowKey={item => item.id}
      />
    </div>
  )
}
